<template>
    <div id="public">
        <!--订单查询统计-->
        <div class="all-order">
      <span>
        <i class="el-icon-wallet"></i>
        总礼物金额：{{allProfit.totalMoney}}
      </span>
            <span>
        <i class="el-icon-bank-card"></i>
        总利润金额：{{allProfit.totalProfit}}
      </span>
        </div>
        <!--搜索-->
        <div class="search-content">
            <el-select v-model="agent" clearable placeholder="请选择代理名称" @change="inquiryList">
                <el-option
                        v-for="item in agentList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-input v-model="userName" placeholder="请输入用户昵称查询" prefix-icon="el-icon-search" clearable
                      @change="inquiryList"/>
            <el-input v-model="giftName" placeholder="请输入礼物名称查询" prefix-icon="el-icon-search" clearable
                      @change="inquiryList"/>
            <el-date-picker
                    v-model="dateTimeRange"
                    type="datetimerange"
                    range-separator="至"
                    clearable
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="inquiryList"
                    :picker-options="pickerOptions"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
        </div>
        <!--操作列表-->
        <div class="table">
            <el-table fit :data="tableData" style="width: 100%">
                <el-table-column label="代理名称" prop="agentName" align="center"/>
                <el-table-column label="用户名称" prop="memberName" align="center"/>
                <el-table-column label="礼物名称" prop="giftName" width="170" align="center"/>
                <el-table-column label="赠送数量" prop="giftNum" align="center"/>
                <el-table-column label="赠送金额" prop="giftMoney" align="center"/>
                <el-table-column label="赠送时间" prop="giveTime" width="170" align="center"/>
                <el-table-column label="分润比例" prop="proportion" align="center"/>
                <el-table-column label="分润金额" prop="profit" align="center"/>
            </el-table>
            <!--分页-->
            <div class="pagination">
                <el-pagination
                        :current-page.sync="currentPage"
                        :page-sizes="[10,20,30,40,50]"
                        layout="total,sizes, prev, pager, next"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
</template>

<script>
    import {Message} from 'element-ui';
    import request from "../../utils/request";
    import {parseTime} from "../../utils";

    export default {
        name: "giftProfitList",
        data() {
            return {
                // 查询
                agent: '',
                agentList: [],
                userName: "",
                giftName: "",
                dateTimeRange: [],
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '昨天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                                let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '前天',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                                let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                                let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '本月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '上月',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                                let start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                                let end = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 23, 59, 59);
                                end.setTime(end.getTime() - 3600 * 24 * 1000);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                },
                isClearable: true,
                allProfit: {
                    totalMoney: 0,
                    totalProfit: 0
                },
                // 列表数据
                tableData: [],
                //分页
                currentPage: 1,
                pageSize: 10,
                total: 0
            }
        },
        mounted() {
            // const end = new Date();
            // const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
            // this.dateTimeRange = [parseTime(start), parseTime(end)];
            this.inquiryAgentList();
        },
        methods: {
            isNotNull(value) {
                return value !== null && value !== undefined && value !== "";
            },
            //查询代理下拉列表
            inquiryAgentList() {
                let that = this;
                request({
                    method: 'get',
                    url: 'admin/agent/all/select',
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    }
                }).then(function (res) {
                    if (res.code === 200) {
                        let arr = res.data;
                        if (arr.length > 0) {
                            for (let i = 0; i < arr.length; i++) {
                                that.agentList.push({
                                    label: arr[i].name,
                                    value: arr[i].id
                                })
                            }
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //查询列表
            inquiryList() {
                let that = this;
                that.tableData = [];
                if (!that.agent) {
                    Message.warning("请先选择一个代理名称");
                    return false;
                }
                let data = {
                    pageNumber: that.currentPage,
                    pageSize: that.pageSize,
                    filters: []
                };
                if (that.isNotNull(that.giftName)) { //礼物名称
                    data.filters.push({
                        property: "g.zh_cn_name",
                        value: that.giftName,
                        operator: "like"
                    })
                }
                if (that.isNotNull(that.userName)) { //用户昵称
                    data.filters.push({
                        property: "m.name",
                        value: that.userName,
                        operator: "like"
                    })
                }
                if (this.isNotNull(that.dateTimeRange)) { //赠送时间范围
                    data.filters.push({
                        property: "mg.time",
                        value: that.dateTimeRange[0],
                        operator: "ge"
                    });
                    data.filters.push({
                        property: "mg.time",
                        value: that.dateTimeRange[1],
                        operator: "le"
                    })
                }
                request({
                    method: 'post',
                    url: "admin/profit/gift/list/" + that.agent,
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    data: data
                }).then(function (res) {
                    if (res.code === 200) {
                        that.total = res.data.total;
                        let arr = res.data.records;
                        if (arr.length === 0) {
                            that.tableData = [];
                        } else {
                            that.tableData = arr
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });
                //充值分润统计
                request({
                    method: 'post',
                    url: "admin/profit/gift/count/" + that.agent,
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    data: data
                }).then(function (res) {
                    if (res.code === 200) {
                        that.allProfit = res.data;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 改变每页显示的数量
            handleSizeChange(val) {
                this.pageSize = val;
                this.inquiryList();
            },
            //改变当前页
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inquiryList();
            }
        }
    }
</script>

<style src="../../assets/css/agentProfitManagement/publicStyle.css">

</style>
